<template>
  <div class="rank">
    <div class="guanfang">
      <h2>官方榜</h2>
      <div class="gRank">
        <div
          class="rankItem"
          v-for="(item, index) in guanRankList"
          :key="index"
        >
          <div class="left">
            <div class="img">
              <img v-lazy="item.coverImgUrl" alt="" />
            </div>
            <div class="upda">
              {{ item.updateFrequency }}
            </div>
          </div>
          <div class="right">
            <div
              class="item"
              v-for="(singItem, singIndex) in item.tracks"
              :key="singIndex"
            >
              {{ index + 1 }}
              {{ singIndex + 1 }}
              <div class="num">
                {{ singIndex + 1 }}
              </div>
              <div class="name">
                <span>{{ singItem.name }}</span>
                <span>{{ singItem.alia }}</span>
              </div>
              <div
                class="art"
                v-for="(artItem, artIndex) in singItem.ar"
                :key="artIndex"
              >
                {{ artItem.name }}
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
    <div class="gobal"></div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      // 没用
      show: false,
      // 官方榜单列表
      guanRankList: [],
    };
  },
  methods: {
    // 请求排行榜歌曲
    getList(id) {
      this.$axios({
        url: "/playlist/detail",
        params: {
          id,
        },
      }).then((res) => {
        let list = [];
        for (let i = 0; i < 5; i++) {
          list.push(res.data.playlist.tracks[i]);
        }
        for (let i = 0; i < this.guanRankList.length; i++) {
          if (this.guanRankList[i].name == res.data.playlist.name) {
            this.guanRankList[i].tracks = list;
          }
        }
      });
    },
  },
  created() {
    this.$axios({
      url: "/toplist",
    }).then((res) => {
      for (let i = 0; i < 4; i++) {
        this.guanRankList.push({
          name: res.data.list[i].name,
          coverImgUrl: res.data.list[i].coverImgUrl,
          updateFrequency: res.data.list[i].updateFrequency,
        });
      }
    });
    this.getList(19723756);
    this.getList(3779629);
    this.getList(2884035);
    this.getList(3778678);
  },
};
</script>

<style scoped>
@import url("../../../css/rank");
</style>